// pages/home/seeall/index.js
// pages/home/index/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    goodsList: [1, 2, 3, 4, 5, 6, 7],   //商品列表
    hiddenFlg: true,  //悬浮窗底部背景
    movableAreaWidth: 0, //滑块宽度
    windowWidth: 0, //屏幕宽度
    currentTab: 0, //预设当前项的值
    scrollLeft: 1, //tab标题的滚动条位置
    headMovaLne: 30, //顶部导航栏小红条宽度
    navX: 0, //顶部列表下标
    tabItemWidth: 0, //tab选项单个宽度
    rectWidth: 0, //节点宽度,获取不同分辨率下顶部导航栏单个选项文字大小
    //顶部导航栏列表
    itemList: [{
      text: '热门'
    }, {
      text: '男装'
    }, {
      text: '鞋包'
    }, {
      text: '手机'
    }, {
      text: '电器'
    }, {
      text: '食品'
    }, {
      text: '电脑'
    }, {
      text: '百货'
    }, {
      text: '服饰'
    }, {
      text: '汽车'
    }, {
      text: '家装'
    }, {
      text: '运动'
    }, {
      text: '充电宝'
    }, {
      text: '家装'
    }, {
      text: '运动'
    }],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function() {
    this.getRect()
    var headMovaLne = this.data.itemList[0].text.length * 29 //计算顶部导航栏小红条初始长度
    console.log(headMovaLne)
    this.setData({
      headMovaLne
    })
  },
  /**
   * 获取不同屏幕节点大小，不同屏幕自适应
   */
  getRect: function() {
    var that = this
    wx.createSelectorQuery().select('#itemID').boundingClientRect(function(rect) {
      var rectWidth = rect.width / 2
      that.setData({
        rectWidth,
      })
    }).exec()
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {
    console.log(this.data.currentTab)

  },

  /**
   * 顶部导航栏滑动事件
   */
  tabTap: function(e) {
    var movableAreaWidth = e.detail.scrollWidth //将scroll-view 组件宽度赋值给movable组件，使其自适应
    var tabItemWidth = e.detail.scrollWidth / this.data.itemList.length //计算单个导航标题宽度
    this.setData({
      tabItemWidth,
      movableAreaWidth
    })
  },
  // 点击标题切换当前页时改变样式和Tab列表位置
  swichNav: function(e) {
    var cur = e.currentTarget.dataset.index; //获取当前点击标题下标
    if (this.data.currentTab == cur) {
      return false;
    }
    
    this.getRedMove(cur)
    
  },
  //获取小红条滑动距离
  getRedMove: function(cur) {
    var cur = cur
    var headMovaLne = this.data.itemList[cur].text.length * 29 //计算顶部导航栏小红条初始长度
    console.log(headMovaLne)
    this.setData({
      headMovaLne
    })
    var x = 0
    for (var i = 0; i < cur; i++) {
      x += this.data.itemList[i].text.length * this.data.rectWidth + 40
    }
    this.setData({
      currentTab: cur,
      navX: x,
    })
    this.checkCor();
  },
  //判断当前滚动超过一屏时，设置tab标题滚动条。
  checkCor: function() {
    var currentTab = this.data.currentTab //获取当前点击标题下标，如果下标大于4，scroll-view组件才发生位移
    if (currentTab > 3) {
      var scrollLeft = (currentTab - 2) * this.data.tabItemWidth
      console.log(scrollLeft)
      this.setData({
        scrollLeft,
      })
      console.log(scrollLeft)
    } else {
      this.setData({
        scrollLeft: 1,
      })
    }
  },
  /**
   * 点击查看全部图标，显示全部选项
   */
  dispAlltap: function() {
    var hiddenFlg = this.data.hiddenFlg
    this.setData({
      hiddenFlg: !hiddenFlg,
    })
  },
  /**
   * 关闭全部图标，显示底部导航栏
   */
  closeAllTap: function() {
    var hiddenFlg = this.data.hiddenFlg
    this.setData({
      hiddenFlg: !hiddenFlg,
    })
  },
  /**
   * 点击下拉菜单中的选项
   */
  typeTap: function(e) {
    console.log(e)
    var cur = e.currentTarget.dataset.index; //获取当前点击标题下标
    if (this.data.currentTab == cur) {
      return false;
    }
    this.closeAllTap()
    this.setData({
      currentTab: cur,
    })
    this.getRedMove(cur)
  }
})